import { type FC, useState } from "react";
import { memo } from "react";
import styles from "./slider.module.scss";
import { initvalue } from "@/cvcomponents";

interface IndexProps {
  value: number | string;
  item: { name: string; label: string };
  onChange: (v: number) => void;
}

const Index: FC<IndexProps> = (props) => {
  const { name, label } = props.item;
  const [blocks] = useState(Array(9).fill(0));
  const head = () => {
    switch (name) {
      case "fontSize":
        return (
          <div className={styles.head}>
            <span>{label}</span>{" "}
            <span>{(initvalue[name] + +props.value * 0.5).toFixed(1)}pt</span>{" "}
          </div>
        );
      case "lineHeight":
        return (
          <div className={styles.head}>
            <span>{label}</span>
            {(initvalue[name] + +(props.value || 0) * 0.05).toFixed(2)}
          </div>
        );
      case "marginHorizontal":
      case "marginVertical":
        return (
          <div className={styles.head}>
            <span>{label}</span>
            {initvalue[name] + +(props.value || 0) * 2}mm
          </div>
        );
      case "marginVerticaltop":
        return (
          <div className={styles.head}>
            <span>{label}</span>
            {initvalue[name] + +(props.value || 0) * 2}mm
          </div>
        );
      case "marginVerticalbottom":
        return (
          <div className={styles.head}>
            <span>{label}</span>
            {initvalue[name] + +(props.value || 0) * 2}mm
          </div>
        );
      case "spacingFactor":
        return (
          <div className={styles.head}>
            <span>{label}</span>[
            {Array(initvalue[name] + +(props.value || 0) * 1)
              .fill(0)
              .map((t) => " – ")}
            ]
          </div>
        );
    }
  };
  return (
    <>
      {head()}
      <div className={styles.slider}>
        <div className={styles.wraper}>
          {blocks.map((_, index) => {
            return (
              <span
                key={index}
                className={styles.item}
                onClick={() => {
                  props.onChange(index);
                }}
              ></span>
            );
          })}
          <div
            className={styles.block}
            style={{ transform: `translateX(${+props.value * 100 - 1}%)` }}
          ></div>
        </div>
        <div className={styles.buttons}>
          <button
            onClick={() => {
              props.onChange(Math.max(+(props.value || 0) - 1, 0));
            }}
          >
            -
          </button>
          <button
            onClick={() => {
              props.onChange(Math.min(+(props.value || 0) + 1, 8));
            }}
          >
            +
          </button>
        </div>
      </div>
    </>
  );
};

export default memo(Index, (o, n) => {
  return o.value === n.value;
});
